<template>
    <div id="loadDetail">
        <scroller style="top:4rem;"
                  refreshText="自播王"
                  :on-refresh="refresh"
                  :on-infinite="infinite"
                  ref="container_scroller"
                    class="d-loading"
        >
            <div class="container">
                <section class="panel">
                    <div class="user">
                        <img src="http://wx.qlogo.cn/mmopen/NlZw7QAR1FSaEc289dJqBzMicvH6oRlMFdZYibGFtaHq4LxugWib1vlib8WUA97NUctK1iaQOqkt3RCFfd0JEMXSf0u4htD3mUCcd/0" />
                        <span class="name">
                            一抹阳光
                        </span>
                    </div>
                    <div class="btn"></div>
                    <div class="screen">
                            <p class="release-position">发布位置:出租车LED显示屏</p>
                            <p class="release-content">
                                今天是愚人节,今天是愚人节,今天是愚人节,今天是愚人节,今天是愚人节,今天是愚人节,今天是愚人节
                            </p>
                            <p class="release-time">发布时间段:
                                <time>2017-04-01</time>
                                <time>2017-04-01</time>
                            </p>
                    </div>
                </section>
            </div>

        </scroller>
    </div>
</template>

<style lang="scss">
   #loadDetail {
       .d-loading {
           overflow:visible;
       }
       .d-loading .pull-to-refresh-layer .spinner-holder
       {
           overflow: hidden;
       }

       .d-loading .pull-to-refresh-layer .arrow{
           background-image: url(../../images/d-loging.svg);
           background-repeat: no-repeat;
           background-position: center;
           background-size:cover;
           width: 2rem;
           height: 2rem;
           transform: scale(1);
           transition: all .35s linear ;
       }

        .d-loading .pull-to-refresh-layer.active  .arrow {
            width: 2.5rem;
            height: 2.5rem;
            animation: rotating 1s linear infinite
       }
        .container{
            padding-top:1rem;
        }
        .panel{
            background-color: #ffffff;
            padding: 0.5rem 0.5rem 0;
            .user{
                position: relative;
                display: inline-block;
                height:2rem;
                img{
                    width: 1.5rem;
                    height: 1.5rem;
                    display: inline-block;
                    position: absolute;
                }
                .name{
                    line-height: 1.5rem;
                    display: inline-block;
                    margin-left: 1.8rem;
                }
            }
            .screen{

                background-color: #5AC0BD;
                padding: 0.6rem;
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;
                color: #ffffff;
                .release-position{
                    margin-bottom: 0.5rem;
                }
                .release-content{
                        font-size: 0.9rem;
                        font-weight: 600;
                }
                .release-time{
                    margin-top: 0.5rem;
                }
            }
        }

   }

</style>
<script>
    import footMenu from '../../components/footer/footMenu.vue'
     export default {
         data() {
             return {

             }
         },
         components: {
             footMenu
         },
         methods: {

             refresh() {
                 /* setTimeout(() => {
                  console.log("刷新")
                  if (this.$refs.container_scroller)
                  this.$refs.container_scroller.finishPullToRefresh()
                  }, 1500)*/
                 if (this.$refs.container_scroller)
                     this.$refs.container_scroller.finishPullToRefresh()
             },
             infinite() {
                 setTimeout(() => {
                     let start = this.bottom + 1
                     console.log("加载数据")
                     this.bottom = this.bottom + 10;
                     setTimeout(() => {
                         if (this.$refs.container_scroller)
                             this.$refs.container_scroller.finishInfinite(true)
                     })
                 }, 1500)
             }
         }
    }
</script>